﻿//表格管理 - 基本表格
layui.use(['form', 'jquery', 'laydate', 'dialog', 'table', 'laypage', 'ajaxUtil', 'permissionUtil', 'switchTab'], function () {
    var table = layui.table,
        laypage = layui.laypage,
        $ = layui.jquery,
        dialog = layui.dialog,
        ajaxutil = layui.ajaxUtil,
        laydate = layui.laydate,
        form = layui.form,
        permissionUtil = layui.permissionUtil,
        switchTab = layui.switchTab;
    permissionUtil.setting(100000);

    var vApp = new Vue({});
    vApp = new Vue({
        el: '#vBasicTableInfoApp',
        data: function () {
            return {
                //姓名
                employeeName: '',
                dialogEmployeeName: '',
                dialogEmployeeAge: '',
                dialogEmployeeHeight: '',
                dialogEmployeePhone: ''
            };
        },
        created: function () {
            //getUserAccount();
            //debugger;
        },
        mounted: function () {
            var self = this;

            //初始化vue后,显示vue模板布局
            //document.getElementById("dataList").style.display = "block";
        },
        watch: {},
        methods: {

        },
        updated: function () {

        }
    });

    //表格渲染
    table.render({
        id: 'cn_GridBasicTable'
        , elem: '#grid_BasicTable'
        , method: 'post'
        , url: '/tabledata/basictable/list'
        //启动分页
        , page: true
        , height: 'full-100'
        , loading: true
        , text: { none: '未查询到数据' }
        , limit: 20
        , limits: [20, 50, 100]
        //禁用前端自动排序
        , autoSort: false
        , where: {
            name: ''
        }
        , request: {
            pageName: 'pageIndex'
            , limitName: 'pageSize'
        }
        , response: {
            //statusName: 'status', //规定数据状态的字段名称，默认：code
            statusCode: 200, //规定成功的状态码，默认：0
            //msgName: 'hint', //规定状态信息的字段名称，默认：msg
            countName: 'total', //规定数据总数的字段名称，默认：count
            //dataName: 'rows' //规定数据列表的字段名称，默认：data
        }
        , cols: [[
            { field: 'employeeId', width: 80, title: '编号' }
            , { field: 'employeeName', width: 150, title: '姓名' }
            , {
                field: 'employeeAge', title: '年龄', width: 100, sort: true, style: function () {
                    return "red";
                }
            }
            , { field: 'employeeSex', width: 90, title: '性别', templet: '#employeeSexTmp'}
            , { field: 'education', width: 180, title: '学历' }
            , { field: 'contactPhone', width: 150, title: '联系方式' }
            , { fixed: 'right', title: '操作', toolbar: '#barOperation', width: 150 }
        ]]
    });

    //监听排序事件 
    table.on('sort(ft_BasicTable)', function (obj) {
        if (obj.type !== null) {
            table.reload('cn_GridBasicTable', {
                initSort: obj
                , where: {
                    sortName: obj.field //排序字段
                    , sortOrder: obj.type //排序方式
                    , name: vApp.employeeName
                }
            });
        }
    });

    //监听行工具事件
    table.on('tool(ft_BasicTable)', function (obj) {
        var rowData = obj.data;
        if (obj.event === 'del') {
            var employeeId = rowData.employeeId;
            dialog.alert.confirm({
                message: '确定删除该用户吗？'
                , success: function (index) {
                    dialog.close(index);
                    ajaxutil.request({
                        url: '/tabledata/basictable/del',
                        data: {
                            employeeId: employeeId
                        },
                        success: function (res) {
                            if (res.code === 200) {
                                dialog.alert.msg('删除成功');

                                var pageIndex = $(".layui-laypage-skip").find("input").val();
                                //刷新页面
                                loadData(pageIndex)
                            } else {
                                dialog.alert.fail(res.msg);
                            }
                        }
                    });
                }
            });
        } else if (obj.event === 'edit') {
            dialog.open({
                dialogId: 'dialog_BasicTable_Add'
                , width: 600
                , height: 330
                , title: '修改'
                , ok: function (index) {
                    editEmployee(index, rowData.employeeId);
                }
                , cancel: function () {

                }
            });
            initEditForm(rowData);
        }
    });

    var loadData = function (pageIndex) {
        //执行重载
        table.reload('cn_GridBasicTable', {
            page: {
                curr: pageIndex //刷新指定页
            }
            , where: {
                name: vApp.employeeName
            }
        });
    }

    //筛选
    $('#btn_BasicTable_Search').on('click', function () {
        loadData(1)
    });

    //添加
    $('#btn_BasicTable_Add').on('click', function () {
        clearForm();

        dialog.open({
            dialogId: 'dialog_BasicTable_Add'
            , width: 600
            , height: 330
            , title: '添加'
            , ok: function (index) {
                addEmployee(index);
            }
            , cancel: function () {

            }
        });
    });

    var addEmployee = function (index) {
        var employeeName = vApp.dialogEmployeeName;
        var employeeAge = vApp.dialogEmployeeAge;
        var employeeHeight = vApp.dialogEmployeeHeight;
        var employeePhone = vApp.dialogEmployeePhone;

        var employeeEducation = $(".clsDialogEmployeeEducation").val();
        var employeeSex = $(".clsDialogEmployeeSex").val();
        ajaxutil.request({
            url: '/tabledata/basictable/add',
            data: {
                employeeName: employeeName
                , employeeAge: employeeAge
                , employeeSex: employeeSex
                , employeeHeight: employeeHeight
                , employeeEducation: employeeEducation
                , employeePhone: employeePhone
            },
            success: function (res) {
                if (res.code === 200) {
                    dialog.close(index);
                    dialog.alert.success('添加成功');

                    vApp.employeeName = '';
                    //刷新页面
                    loadData(1)

                    clearForm();
                } else {
                    dialog.alert.fail(res.msg);
                }
            }
        });
    }

    var editEmployee = function (index, employeeId) {
        var employeeName = vApp.dialogEmployeeName;
        var employeeAge = vApp.dialogEmployeeAge;
        var employeeHeight = vApp.dialogEmployeeHeight;
        var employeePhone = vApp.dialogEmployeePhone;

        var employeeEducation = $(".clsDialogEmployeeEducation").val();
        var employeeSex = $(".clsDialogEmployeeSex").val();
        ajaxutil.request({
            url: '/tabledata/basictable/edit',
            data: {
                employeeId: employeeId
                , employeeName: employeeName
                , employeeAge: employeeAge
                , employeeSex: employeeSex
                , employeeHeight: employeeHeight
                , employeeEducation: employeeEducation
                , employeePhone: employeePhone
            },
            success: function (res) {
                if (res.code === 200) {
                    dialog.close(index);
                    dialog.alert.success('修改成功');

                    //当前页码（如果当前页存在多个表格，则需要换种写法）
                    var pageIndex = $(".layui-laypage-skip").find("input").val();

                    //刷新指定页面
                    loadData(pageIndex);

                    clearForm();
                } else {
                    dialog.alert.fail(res.msg);
                }
            }
        });
    }

    var initEditForm = function (rowData) {
        //debugger;
        vApp.dialogEmployeeName = rowData.employeeName;
        vApp.dialogEmployeeAge = rowData.employeeAge;
        vApp.dialogEmployeeHeight = rowData.employeeHeight;
        vApp.dialogEmployeePhone = rowData.contactPhone;

        //下拉框目前只能通过jq赋值,vue方式直接赋值无效,知道的同学麻烦告知作者
        $(".clsDialogEmployeeEducation").val(rowData.education);
        $(".clsDialogEmployeeSex").val(rowData.employeeSex);

        //更新 lay-filter="ft_BasicTableForm" 所在容器内的全部表单状态
        form.render(null, 'ft_BasicTableForm');
    }

    ///清空表单
    var clearForm = function () {
        vApp.dialogEmployeeName = '';
        vApp.dialogEmployeeAge = '';
        vApp.dialogEmployeeHeight = '';
        vApp.dialogEmployeePhone = '';

        $(".clsDialogEmployeeEducation").val('');
        $(".clsDialogEmployeeSex").val('');

        //更新 lay-filter="ft_BasicTableForm" 所在容器内的全部表单状态
        form.render(null, 'ft_BasicTableForm');
    }
});